<template>
    <vxe-card width="100%" :border="false" shadow>
        <template #title>
            <vxe-text icon="vxe-icon-info-circle">功能权限</vxe-text>
        </template>

        <template #default>
            <vxe-table :data="tableData">
                <vxe-column field="interfaceName" width="160px">
                    <template #header>
                        <vxe-text style="font-weight: normal">接口名称</vxe-text>
                    </template>
                    <template #default="{ row }">
                        <span>{{ row.interfaceName }}</span>
                    </template>
                </vxe-column>

                <vxe-column field="interfaceField">
                    <template #header>
                        <vxe-text style="font-weight: normal">字段权限</vxe-text>
                    </template>
                    <template #default="{ row }">
                        <vxe-checkbox-group v-model="row.hobbyList2" :options="hobbyOptions" />
                    </template>
                </vxe-column>
            </vxe-table>
        </template>

        <template #footer>
            <div class="flex-left">
                <vxe-button icon="vxe-icon-save" size="medium" status="primary">保存配置</vxe-button>
            </div>
        </template>
    </vxe-card>
</template>

<script setup lang="ts">
import {ref} from 'vue'

interface RowVO {
    id: number
    interfaceName: string
    role: string
    sex: string
    age: number
    address: string
}

const tableData = ref<RowVO[]>([
    {id: 10001, interfaceName: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc'},
    {id: 10002, interfaceName: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
    {id: 10003, interfaceName: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
    {id: 10004, interfaceName: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai'}
])

const hobbyOptions = ref([
    {label: '爬山', value: '1'},
    {label: '游泳', value: '2'},
    {label: '干饭', value: '3'},
    {label: '干饭', value: '4'},
    {label: '干饭', value: '5'},
    {label: '干饭', value: '6'},
    {label: '干饭', value: '7'},
    {label: '干饭', value: '8'},
    {label: '干饭', value: '9'},
])
</script>

<style scoped lang="scss">

</style>
